<template>
  <div class="top-side">
    <div class="title">{{title}}</div>
    <div class="time">{{date}}
      <strong>{{time}}</strong>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['title'],
    name: 'topSide',
    data () {
      return {
        date: '',
        time: '',
        week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      }
    },
    mounted () {
      setInterval(this.updateTime, 60000)
      this.updateTime()
    },
    methods: {
      updateTime () {
        var cd = new Date()
        this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2)
        this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()]
      },
      zeroPadding (num, digit) {
        var zero = ''
        for (var i = 0; i < digit; i++) {
          zero += '0'
        }
        return (zero + num).slice(-digit)
      }
    }
  }
</script>
<style>
  .top-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .title {
    font-size: 58px;
    color: #fdfeff;
    position: absolute;
    left: 62px;
    top: 30px;
    text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
  }

  .time {
    position: absolute;
    top: 30px;
    right: 55px;
    color: #fdfeff;
    font-size: 36px;
    text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
  }

  .time strong {
    font-size: 60px;
  }

</style>
